<template>
  <div>
	<a-spin :spinning="isLoading">
		<!---->
		<div class="kg-head-he"></div>
		<header class="kg-head reg-top">
			<div class="dqxz" @click="back"><i class="micon">&#xe61e;</i></div>
			<div class="search_box show-cansu">
				报名详情
			</div>
		</header>
		<!---->
		<div class="kg-center" v-if="sign">
				<!---->
				<div class="kg-ksbox mb25" >
					<div class="kg-ksxqbox hy-ksjgzt" v-if="sign.type && sign.type.val==10">
						{{sign.addr_status.val==20?'考点已审核':'待考点审核'}}
						<div v-if="sign.addr_status.val==20">
							<p class="red" v-if="sign.review_status && sign.review_status.val==10 && !sign.signFile">请上传作品</p><!--红色 red-->
							<p class="red" v-if="sign.review_status && sign.review_status.val==10 && sign.signFile">考官评审中</p>
							<p class="green" v-if="sign.cert && sign.review_status && sign.review_status.val==20">{{sign.review}}</p>
						</div>
						
					</div>
					<div class="kg-ksxqbox hy-ksjgzt" v-if="sign.type && sign.type.val==20">
						<p v-if="!sign.cert">{{!sign.ticket?'准考证审核中':'准考证已发放'}}</p>
						<div v-if="!sign.cert" class="zpsc-ts">考级时间</div>
						<p v-if="sign.exam_time">{{sign.exam_time}}</p>
						<p v-if="sign.cert">证书已发放</p>
					</div>
				</div>
				<!---->
				<div class="kg-ksbox mb25">
					<div class="title">
					<div class="title_a">考级内容</div>
					</div>
					
					<div class="kg-ksxqbox">
						<div class="kg-ksxq-list">
							<div class="kg-ksxq-lista">报考专业</div>
							<div class="kg-ksxq-listb">
								<div class="kg-ksxq-listc">{{sign.major_first}}</div>
								<div class="kg-ksxq-listc">{{sign.major_second}}</div>
							</div>
						</div>
						<div class="kg-ksxq-list">
							<div class="kg-ksxq-lista">报考等级</div>
							<div class="kg-ksxq-listb">{{sign.grade}}</div>
						</div>
						<div class="kg-ksxq-list kg-ksli-heat">
							<div class="kg-ksxq-lista">考试曲目</div>
							<div class="kg-ksxq-listb">{{sign.sign_item}}</div>
						</div>
						<div class="kg-ksxq-list height-auto bpbol" v-if="sign.file_id">
							<div class="kg-ksxq-list-video">
								<div class="kg-ksxq-lista">考试作品</div>
								<div class="kg-ksxq-listb">{{sign.signFile.file_name}}</div>
							</div>
							<div class="kg-ksxq-video">
								<video class="c-video" controls="" preload="">
									<source :src="sign.signFile.external_url">不支持video
								</video>
							</div>
						</div>
					</div>
				</div>
			<div class="kg-ksbox mb25" v-if="sign.type && sign.ticket && sign.type.val==20">
				<div class="title">
				<div class="title_a">准考证</div>
				<a class="title-but" :href="sign.ticket" :download="sign.ticket">准考证下载</a>
				</div>
				
				<div class="kg-ksxqbox" v-if="sign.ticket">
					<div class="xy-zhengshu"><a :href="sign.ticket"><img :src="sign.ticket"/></a></div>
				</div>
			</div> 
			<div class="kg-ksbox mb25" v-if="sign.cert  && sign.review_status.val==20">
				<div class="title">
				<div class="title_a">考评成绩</div>
				</div>
				
				<div class="kg-ksxqbox">
					<div class="kg-ksxq-list bg-none">
						<div class="kg-ksxq-lista">成绩</div>
						<div class="kg-ksxq-listb">
							<label><input class="test-radio" type="radio" name="radiozt" checked /><span class="test-radioInput"></span>{{sign.review}}</label>
						</div>
					</div>
				
					<div class="kg-ksxq-list height-auto bg-none">
							<div class="kg-ksxq-lista">考官评语</div>
							<div class="kg-ksxq-listb line-h40" v-html="sign.review_des"></div>
					</div>
				</div>
			</div>
			<!---->
			<div class="kg-ksbox mb25" v-if="sign.cert  && sign.review_status.val==20 ">
				<div class="title">
				<div class="title_a">考级证书</div>
				<div class="title-but">证书下载</div>
				</div>
				
				<div class="kg-ksxqbox" v-if="sign.cert">
					<div class="xy-zhengshu"><a :href="sign.cert.cert_url"><img :src="sign.cert.cert_url"/></a></div>
				</div>
			</div>
			

			
		<!---->   	
		</div>
		<!---->   
	</a-spin>
	
  </div>
 
</template>

<script>
import { detail} from '@/api/sign/index'
import { useRouter } from "vue-router"
export default {
  name: 'Index',
  data(){
	return{
      isLoading: false,// 正在加载
	  sign_id:0,
	  sign:{},
	  review_status:10
	}
  },
  created () {
        this.sign_id = this.$route.query.sign_id
    	this.getSign()
  },
  methods: {
	back(){this.$router.go(-1)},
    getSign(){
		detail({sign_id:this.sign_id}).then(result=>{
			this.sign = result.data.sign;
			this.review_status = result.data.sign.review_status.val;
		})
	},
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.kg-ksli-heat{height: auto;}
.kg-ksli-heat .kg-ksxq-listb{padding: .24rem .2rem .24rem .4rem; line-height: 1.65;}
.zpsc-ts{font-size: .4rem; width: 30%;  margin: 0.333333rem auto 0; padding: 0.1rem 0.266667rem;}
.zpsc-ts::before{top: inherit; transform: rotate(180deg); bottom: -.133333rem;}
.title-but{font-size: 0.36rem;}
.title-but:hover{color: #fff; font-size: 0.36rem;}
</style>
